<template>
  <div class="Banner-main-head2">
    <div class="contniers">
        <el-row>
            <el-col :span="11" v-for="item in recmmond" :key="item.id">
              <div @click="gouDetail(item.id)">
                <img :src="item.img">
              <div class="Banner-main-head-p">
                <p>{{item.introduce}}</p>
              </div>
              <el-row>
                <el-col :span="12">
                  <span>{{item.price}}</span>
                  <p>{{item.reputation}}</p>
                </el-col>
                <el-col :span="12">
                  <p>{{item.like}}</p>
                </el-col>
              </el-row>
              </div>
            </el-col>
        </el-row>
    </div>

    <div class="Banner-foot">
      <div class="Banner-foot-1">
        <el-row>
          <el-col :span="6" v-for="item in data" :key="item.id">
            <router-link :to="{ path: item.pathss }"> {{ item.btotitle }} </router-link>
          </el-col>
        </el-row>
      </div>

      <el-row class="Banner-foot-2">
        <el-col :span="8">
          <img src="@/assets/images/app.png" />
          <p>客户端</p>
        </el-col>
        <el-col :span="8">
          <img src="@/assets/images/客户端.png" />
          <p>触屏版</p>
        </el-col>
        <el-col :span="8">
          <img src="@/assets/images/电脑版.png" />
          <p>电脑版</p>
        </el-col>
      </el-row>
      <div class="Banner-foot-3">
        <p style="text-align:center;">{{msg}}</p>
      </div>
    </div>
  </div>
</template>

<script>
// 引入axios
import axios from 'axios'
export default {
  name: "Recommend",

  data() {
    return {
      msg:'Copyright C 2004-2018 京东JD.com 版本所有',
      recmmond:''
    };
  },
  created(){
    // 调用下面的接口
    this.getData();
  },
  methods:{
    // 请求接口
    async getData(){
      let res = await axios({
        url:'/api/recommend'
      })
      // console.log(res.data.data);
      this.recmmond = res.data.data
    },
    // 传参
    gouDetail(id){
     this.$router.push({
      path:'/detail',
      // 显式路由传参query，
      query:{
        id
      }
     })
    }
  }
};
</script>

<style scoped>
.contniers{
    margin-top: 49px;
}
.Banner-main-head2{
	background-color: rgb(240,242,245);	
    width: 400px;
    margin: 0 auto;
    height: 700px;
}

.Banner-main-head2 .contniers img{
	width: 100%;
}
.Banner-main-head2>.contniers>.el-row>.el-col{
	cursor: pointer;
}
.Banner-main-head2>.el-row>.el-col>div{
	text-align: left;	
	font-size: 0.8em;	
}
.Banner-main-head-p{
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin-left: 6px;
}
	
.Banner-main-head2>.contniers>.el-row>.el-col{
	border: 1px solid lightgray;
	margin: 5px;
	height: 325px;
}
.Banner-main-head2>.contniers>.el-row>.el-col>.el-row{
	margin-top: 8px;
	color: gray;
}
.Banner-main-head2>.contniers>.el-row>.el-col>.el-row>.el-col:first-child{
	text-indent: 5px;
}
.Banner-main-head2>.contniers>.el-row>.el-col>.el-row>.el-col:first-child span{
	color: red;
	font-weight: bold;
}
.Banner-main-head2>.contniers>.el-row>.el-col>.el-row>.el-col:last-child{
	text-align: right;
	position: relative;
	padding-top: 13px;
	padding-right: 8px;
}
.Banner-main-head2>.contniers>.el-row>.el-col>.el-row>.el-col:last-child p{
	display: inline-block;
	border: 1px solid lightgray;
}
.Banner-foot{
	color: gray;
	background-color: rgb(248,248,248);
}
.Banner-foot img{
	width: 30px;
	height: 30px;
}
.Banner-foot-1{
	height: 45px;
	line-height: 45px;
	border-top: 1px solid dimgray;
}
.Banner-foot-1 .el-row{
	height: 20px;
	line-height: 20px;
	margin-top: 15px;
}
.Banner-foot-1 .el-col{

	border-left: 1px solid dimgray;
    text-align: center;
}
.Banner-foot-1 .el-col:first-child{
	border: none;
}
.Banner-foot-1 a{
	color: gray;
    text-decoration: none;
}
.Banner-foot-2{
	border-top: 1px solid dimgray;
	border-bottom: 1px solid dimgray;
	font-size: 1em;
}
.Banner-foot-2>div{
	cursor: pointer;
    text-align: center;
}
.Banner-foot-2 img{
	margin-top: 12px;
}
.Banner-foot-3{
	font-size: 0.8em;
	height: 20px;
	line-height: 20px;
	cursor: pointer;

}
</style>
